<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.form-group {
	float: left;
	clear: both;
}

dl, dt, dd {
	margin: 0;
	background: #00BFFF;
	font-size: 14px;
}

dl {
	margin: 0 auto;
	width: 100%;
	border: 1px solid #B0E2FF;
	border-bottom: none;
}

dt {
	font-weight: 600;
	background: #87CEFA;
	color: #fff;
}

dt, dd {
	line-height: 35px;
	border-bottom: 1px solid #B0E2FF;
	height: 35px;
}

.fff {
	background: #fff
}

dt div, dd div {
	display: block;
	float: right;
	font-size: 14px;
	border-left: 1px solid #B0E2FF;
	width: 120px;
	text-align: center;
	vertical-align: middel;
}
</style>
</head>
<body>
	<div class="panel panel-info panel-content">
		<div class="panel-heading"
			style="position: relative; overflow-y: auto; height: 100%;">
			<form id="productattribute_form" method="post">
				<input type="hidden" name="proCategoryId" value="${category.id!}" />
				[#if proCategoryAttributes?? && proCategoryAttributes?size>0]
				[#list proCategoryAttributes as proCate]
				<div class="productcolumn" style="margin-bottom: 10px;">
                    <input type="hidden" name="id" value="${proCate.id!}" />
					<div class="form-group">
						<label for="name">自定义字段：</label>
						<div>
							<input class="form-control" style="width: 200px" maxlength="200"
								value="${proCate.name!}"
								name="name" />
						</div>
					</div>
					<div class="form-group">
						<label for="name">排序：</label>
						<div>
							<input class="form-control" style="width: 200px" maxlength="200"
								value="${proCate.seq!}"
								name="seq" />
						</div>
					</div>
					<div class="form-group">
						<label for="optionValues">选项值集：</label>
						<div>
							<dl class="optioninputs">
								<dt>
									<div>&nbsp;</div>
									<div style="width: 308px;">选项值</div>
									<div>排序</div>
                                </dt>
								[#if proCate.proCategoryAttrItems?? && proCate.proCategoryAttrItems?size>0]
									[#list proCate.proCategoryAttrItems as optionValues]
										<dd class=fff>
                                            <input type="hidden"
                                                   name="id"
                                                   value="${optionValues.id!}">
                                            <div>
												<span onclick="removeoption(this)"
                                                      style="line-height: 30px; cursor: pointer"
                                                      class="glyphicon glyphicon-minus">删除</span>
                                            </div>
                                            <div style="width: 308px;">
                                                <input class="form-control" maxlength="100" type="text"
                                                       style="width: 300px; height: 30px; display: inline-block"
                                                       name="name"
                                                       value="${optionValues.name!}" data-rule="required;" />
                                            </div>
											<div>
												<input class="form-control" maxlength="10"
													style="width: 100px; height: 30px; display: inline-block"
													name="seq"
													value="${optionValues.seq!}" type="number"
													data-rule="required;" />
											</div>
											<div style="clear: both;"></div>
										</dd>
									[/#list]
								[/#if]
							</dl>
						</div>
					</div>
					<div class="form-group" style="width: 100%;">
						<button onclick="addoptionValues(this);" type="button"
							class="btn btn-info">
							添加选项<span class="glyphicon glyphicon-plus"></span>
						</button>
                        <button onclick="delcolumn(this);" type="button"
                                class="btn btn-info">
                            删除字段<span class="glyphicon glyphicon-remove"></span>
                        </button>
						<hr
							style="border: none; margin: 0; border-top: 2px solid #46b8da; margin-top: 10px;">
					</div>
				</div>
				[/#list] [#else]
				<div class="productcolumn" style="margin-bottom: 10px;">
					<div class="form-group">
						<label for="name">自定义字段：</label>
						<div>
							<input class="form-control" style="width: 200px" maxlength="200"
								name="proCategoryAttribute[0].name" />
						</div>
					</div>
					<div class="form-group">
						<label for="name">排序：</label>
						<div>
							<input class="form-control" style="width: 200px" maxlength="200"
								name="proCategoryAttribute[0].seq" />
						</div>
					</div>
					<div class="form-group">
						<label for="optionValues">选项值集：</label>
						<div>
							<dl class="optioninputs">
								<dt>
                                	<div>&nbsp;</div>
									<div style="width: 308px;">选项值</div>
									<div>排序</div>
								</dt>
								<dd class=fff>
                                    <div>
										<span onclick="removeoption(this)"
											  style="line-height: 30px; cursor: pointer"
											  class="glyphicon glyphicon-minus">删除</span>
                                    </div>
									<div style="width: 308px;">
										<input class="form-control" maxlength="100" type="text"
											style="width: 300px; height: 30px; display: inline-block"
											name="name"
											data-rule="required;" />
									</div>
									<div>
										<input class="form-control" maxlength="10"
											style="width: 100px; height: 30px; display: inline-block"
											name="seq"
											type="number" data-rule="required;" />
									</div>
                                    <div style="clear: both;"></div>
								</dd>
							</dl>
						</div>
					</div>
					<div class="form-group" style="width: 100%;">
						<button onclick="addoptionValues(this);" type="button"
							class="btn btn-info">
							添加选项<span class="glyphicon glyphicon-plus"></span>
						</button>
                        <button onclick="delcolumn(this);" type="button"
                                class="btn btn-info">
                            删除字段<span class="glyphicon glyphicon-remove"></span>
                        </button>
						<hr
							style="border: none; margin: 0; border-top: 2px solid #46b8da; margin-top: 10px;">
					</div>
				</div>
				[/#if]
			</form>
			<div class="form-group">
				<button onclick="addcolumn(this);" type="button"
					class="btn btn-info">
					添加字段<span class="glyphicon glyphicon-pencil"></span>
				</button>
			</div>
			<div class="form-group">
				<button onclick="sub();" type="button" class="btn btn-success">提交</button>
			</div>
		</div>
	</div>
</body>

<!-- 选项模版 -->
<script type="text/html" id="addoption">
    <dd class=fff>
        <div>
			<span onclick="removeoption(this)"
                  style="line-height: 30px; cursor: pointer"
                  class="glyphicon glyphicon-minus">删除</span>
        </div>
        <div style="width: 308px;">
            <input class="form-control" maxlength="100" type="text"
                   style="width: 300px; height: 30px; display: inline-block"
                   name="name"
                   data-rule="required;" />
        </div>
        <div>
            <input class="form-control" maxlength="10"
                   style="width: 100px; height: 30px; display: inline-block"
                   name="seq"
                   type="number" data-validator-option="{stopOnError:true,timely:0}"
                   data-rule="required;" />
        </div>
        <div style="clear: both;"></div>
    </dd>
</script>

<!-- 字段模版 -->
<script type="text/html" id="addcolumn">
    <div class="productcolumn" style="margin-bottom: 10px;">
        <div class="form-group">
            <label for="name">自定义字段：</label>
            <div>
                <input class="form-control" style="width: 200px" maxlength="200"
                       name="name" />
            </div>
        </div>
        <div class="form-group">
            <label for="name">排序：</label>
            <div>
                <input class="form-control" style="width: 200px" maxlength="200"
                       name="seq" />
            </div>
        </div>
        <div class="form-group">
            <label for="optionValues">选项值集：</label>
            <div>
                <dl class="optioninputs">
                    <dd class=fff>
                        <div>
							<span onclick="removeoption(this)"
                                  style="line-height: 30px; cursor: pointer"
                                  class="glyphicon glyphicon-minus">删除</span>
                        </div>
                        <div  style="width: 308px;">
                            <input class="form-control" maxlength="100" type="text"
                                   style="width: 300px; height: 30px; display: inline-block;"
                                   name="name"
                                   data-rule="required;" />
                        </div>
                        <div>
                            <input class="form-control" maxlength="10"
                                   style="width: 100px; height: 30px; display: inline-block;"
                                   name="seq"
                                   type="number"
                                   data-rule="required;" />
                        </div>
                        <div style="clear: both;"></div>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="form-group" style="width: 100%;">
            <button onclick="addoptionValues(this);" type="button"
                    class="btn btn-info">
                添加选项<span class="glyphicon glyphicon-plus"></span>
            </button>
            <button onclick="delcolumn(this);" type="button"
                    class="btn btn-info">
                删除字段<span class="glyphicon glyphicon-remove"></span>
            </button>
            <hr
                    style="border: none; margin: 0; border-top: 2px solid #46b8da; margin-top: 10px;">
        </div>
    </div>
</script>
<script src="/res/third/nice-validator/jquery.validator.js?local=zh-CN"
	type="text/javascript"></script>
<script>
	$('#productattribute_form').validator({
		theme: 'yellow_right_effect',
		stopOnError:true,
		timely: 2,
		msgClass : "n-right"
	});
	//增加字段
	function addcolumn() {
		var form = $("#productattribute_form");
		form.append($("#addcolumn").html());
		columnpaixu();
	}
	//删除字段
	function delcolumn(obj) {
		$(obj).parent().parent().remove();
		//columnpaixu();
        optionpaixu($(obj).parents(".optioninputs"));
	}
	//字段排序
	function columnpaixu() {
		/*var form = $("#productattribute_form");
		form.find(".productcolumn").each(
				function(i) {
					$(this).find("[name^='proCategoryAttribute']").each(
							function() {
								var name = $(this).attr("name");
								var tkname = name.substring(name
										.indexOf("proCategoryAttribute["), name
										.indexOf("]"));
								name = name.replace(tkname,
										"proCategoryAttribute[" + i + "");
								$(this).attr("name", name);
							});
				});*/
	}

	//增加选项
	function addoptionValues(obj) {
		var op = $(obj).parent().parent().find(".optioninputs");
		op.append($("#addoption").html());
		optionpaixu(op);
	}
	//删除字段
	function removeoption(obj) {
        $(obj).parents('dd').remove();
        var op = $(obj).parents(".optioninputs");
		optionpaixu(op);
	}
	//选项排序
	function optionpaixu(op) {
		//先排序字段
		/*columnpaixu();
		$(op).find(".fff").each(
				function(j) {
					$(this).find("input").each(
							function() {
								var name = $(this).attr("name");
								var tkname = name.substring(name
										.indexOf("proCategoryAttrItems["), name
										.lastIndexOf("]"));
								name = name.replace(tkname,
										"proCategoryAttrItems[" + j + "");
								$(this).attr("name", name);
							});
				});*/
	}

	//提交数据
	function sub() {
		$("#productattribute_form").isValid(function() {

			$.each($('div.productcolumn'), function(i, v) {
                var $id = $(v).find('input[name$=id]:first');
				var $name = $(v).find('input[name$=name]:first');
                var $seq = $(v).find('input[name$=seq]:first');
				$id.prop('name', 'proCategoryAttribute[' + i + '].id');
                $name.prop('name', 'proCategoryAttribute[' + i + '].name');
                $seq.prop('name', 'proCategoryAttribute[' + i + '].seq');
				$.each($(v).find('dl.optioninputs dd'), function(j, o) {
					var _$id = $(o).find('input[name$=id]');
                    var _$seq = $(o).find('input[name$=seq]');
                    var _$name = $(o).find('input[name$=name]');
                    _$id.prop('name', 'proCategoryAttribute[' + i + '].proCategoryAttrItems[' + j + '].id');
                    _$seq.prop('name', 'proCategoryAttribute[' + i + '].proCategoryAttrItems[' + j + '].seq');
                    _$name.prop('name', 'proCategoryAttribute[' + i + '].proCategoryAttrItems[' + j + '].name');
                });
			});

			$.ajax({
				type : "POST",
				dataType : "json",
				url : "/category/o_productattribute.do",
				data : $("#productattribute_form").serialize(),
				beforeSend : function() {
					art.dialog.tips("提交中....", 2);
				},
				success : function(data) {
					if (data.success) {
						refeshproduct();
					} else {
						art.dialog.tips(data.msg);
					}
				}
			});
		});
	}

	function refeshproduct() {
		$.messager.progress({
			text : "loadding",
			interval : 100
		});
		$("#productattribute").load(
				'/category/v_productattribute_list.do?so_id=${category.id!}',
				function() {
					$.messager.progress('close');
				});
	}
</script>
</html>